import { ProCard } from '@ant-design/pro-components';

export default () => {
  return (
    <>
      <ProCard style={{ maxWidth: 300 }}>Content</ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Headless Props 说明：</h4>
        <ul>
          <li>
            <strong>style</strong>: 卡片样式对象，设置最大宽度
          </li>
          <li>
            <strong>children</strong>: 卡片内容
          </li>
        </ul>
        <h4>Headless 特点：</h4>
        <ul>
          <li>
            <strong>无标题</strong>: 不设置 title 属性，卡片没有标题区域
          </li>
          <li>
            <strong>简洁设计</strong>: 只显示内容区域，界面更加简洁
          </li>
          <li>
            <strong>灵活布局</strong>: 适合作为容器组件使用
          </li>
        </ul>
        <h4>样式配置：</h4>
        <ul>
          <li>
            <strong>maxWidth</strong>: 设置最大宽度，避免在大屏幕上过宽
          </li>
          <li>
            <strong>响应式</strong>: 在小屏幕上会自动调整宽度
          </li>
        </ul>
        <h4>与其他类型的区别：</h4>
        <ul>
          <li>
            <strong>有标题卡片</strong>: 设置 title 属性，显示标题区域
          </li>
          <li>
            <strong>无标题卡片</strong>: 不设置 title 属性，只显示内容
          </li>
          <li>
            <strong>分割卡片</strong>: 使用 split 属性进行分割布局
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>内容容器</strong>: 作为内容的容器组件
          </li>
          <li>
            <strong>布局组件</strong>: 用于页面布局和内容分组
          </li>
          <li>
            <strong>信息展示</strong>: 展示简单的信息内容
          </li>
          <li>
            <strong>表单容器</strong>: 作为表单的容器组件
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>内容清晰</strong>: 确保内容本身能够表达其用途
          </li>
          <li>
            <strong>样式合理</strong>: 根据内容设置合适的样式
          </li>
          <li>
            <strong>响应式设计</strong>: 考虑在不同屏幕尺寸下的显示效果
          </li>
        </ul>
      </div>
    </>
  );
};
